<template>
  <div class="customerManagement">
    <el-row class="rows" :gutter="20" type="flex" justify="space-between">
      <el-col :span="4">
        <el-card>
          <el-input
            v-model="searchName"
            placeholder="搜索部门"
            prefix-icon="el-icon-search"
          />
          <el-tree
            ref="tree"
            class="filter-tree"
            :data="treeData"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode"
          />
        </el-card>
      </el-col>
      <el-col :span="20">
        <el-card>
          <div slot="header" class="card-title">
            <h4>业务员-客户列表</h4>
            <el-input
              v-model="searchTable"
              placeholder="请输入内容"
              class="input-with-select"
            >
              <el-button slot="append" icon="el-icon-search" />
            </el-input>
          </div>
          <my-table
            :columns="columns"
            :data="data"
            :show-selection="true"
            @selectChange="selectChange"
          >
            <template slot="table-title">
              <el-button type="primary" plain>启用客户</el-button>
              <el-button type="primary" plain>禁用客户</el-button>
              <el-button type="primary" plain>标记特点客户</el-button>
              <el-button type="primary" plain>取消特定客户标记</el-button>
            </template>
            <template v-slot:others="{ row }">
              <el-radio-group v-model="row.others">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </template>
            <template v-slot:aciton="{ row }">
              <el-button
                type="text"
                :class="row.status ? '' : 'danger'"
              >禁用</el-button>
            </template>
          </my-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import myTable from '@/components/table/myTable'
export default {
  components: { myTable },
  data() {
    return {
      searchName: '',
      treeData: [
        {
          id: 1,
          label: '一级 1',
          children: [
            {
              id: 4,
              label: '二级 1-1',
              children: [
                {
                  id: 9,
                  label: '三级 1-1-1'
                },
                {
                  id: 10,
                  label: '三级 1-1-2'
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      searchTable: '',
      columns: [
        {
          label: '客户名',
          props: 'name'
        },
        {
          label: '添加时间',
          props: 'addTime'
        },
        {
          label: '业务部',
          props: 'work'
        },
        {
          label: '业务员',
          props: 'member'
        },
        {
          label: '特定客户',
          props: 'others',
          slot: 'others'
        },
        {
          label: '操作',
          props: 'action',
          slot: 'action',
          minwidth: '300'
        }
      ],
      data: [],
      selectChangeList: []
    }
  },
  watch: {
    searchName(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {},
  mounted() {},

  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    selectChange(val) {
      this.selectChangeList = val
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/element-variables.scss";
.customerManagement {
  width: 100%;
}
.el-card {
  height: 100%;
}
.card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  h4 {
    flex: 1;
    margin: unset;
  }
  ::v-deep .input-with-select {
    width: unset;
  }
}
::v-deep .el-tree-node.is-current.is-focusable {
  background: #e8f4ff !important;
  color: $--color-primary;
}
.danger {
  color: $--color-primary;
}
</style>
